<!DOCTYPE html>
<html>

<head>
    <title>{$Think.config.app_name}</title>
    {include file="public/head"/}
    <style>
        .subItemIcon {
            padding-left: 20px;
        }
    </style>
</head>

<body class="layui-layout-body">
    <div id="LAY_app" class="layadmin-tabspage-none">
        <div class="layui-layout layui-layout-admin">
            {include file="public/menu"/}
            <!-- 主体内容 -->
            <div class="layui-body root_box" v-cloak>
                <div class="layui-form layui-border-box">
                    <div class="layui-table-tool">
                        <div class="layui-form">
                            <div class="layui-input-inline">
                                <button @click="item_add" type="button" class="layui-btn layui-btn-sm"><i
                                        class="iconfont icon-tianjia"></i>添加</button></span>
                            </div>
                            <div class="layui-input-inline">
                                <select lay-ignore class="layui-input layui-input-sm" name="node_module"
                                    v-model="node_module" style="width:100px;">
                                    <option value="__all__">全部模块</option>
                                    <option value="admin">管理模块</option>
                                    <option value="api">接口模块</option>
                                </select>
                            </div>
                            <div class="layui-input-inline">
                                <input type="text" v-model="node_controller" class="layui-input layui-input-sm"
                                    placeholder="请输入控制器" />
                            </div>
                            <div class="layui-input-inline">
                                <input type="text" v-model="node_action" class="layui-input layui-input-sm"
                                    placeholder="请输入方法" />
                            </div>
                            <div class="layui-input-inline">
                                <select lay-ignore class="layui-input layui-input-sm" name="node_show"
                                    v-model="node_show" style="width:100px;" @change="node_show_change">
                                    <option value="1">只看显示节点</option>
                                    <option value="__all__">查看全部节点</option>
                                </select>
                            </div>
                            <div class="layui-input-inline">
                                <button type="button" class="layui-btn layui-btn-primary layui-btn-sm"
                                    @click="getList"><i class="iconfont icon-search"></i>搜索</button></span>
                            </div>
                        </div>
                    </div>
                    <div class="layui-table-box">
                        <div class="layui-table-body layui-table-main">
                            <table cellspacing="0" cellpadding="0" border="0" class="layui-table" width="100%">
                                <thead>
                                    <tr>
                                        <th class="layui-table-col-special">
                                            <div class="layui-table-cell" v-show="isSelectedAll">
                                                <div lay-skin="primary"
                                                    class="layui-unselect layui-form-checkbox layui-form-checked"
                                                    onclick="selectALL()"><i class="layui-icon layui-icon-ok"></i></div>
                                            </div>
                                            <div class="layui-table-cell" v-show="!isSelectedAll">
                                                <div lay-skin="primary" class="layui-unselect layui-form-checkbox"
                                                    onclick="selectALL()"><i class="layui-icon layui-icon-ok"></i></div>
                                            </div>
                                        </th>
                                        <th>
                                            <div class="layui-table-cell">
                                                <span>ID</span>
                                            </div>
                                        </th>
                                        <th>
                                            <div class="layui-table-cell"><span>类型</span>
                                            </div>
                                        </th>
                                        <th>
                                            <div class="layui-table-cell"><span>名称</span>
                                            </div>
                                        </th>
                                        <th>
                                            <div class="layui-table-cell "><span>地址</span>
                                            </div>
                                        </th>
                                        <th>
                                            <div class="layui-table-cell"><span>排序</span>
                                            </div>
                                        </th>
                                        <th>
                                            <div class="layui-table-cell"><span>修改时间</span>
                                            </div>
                                        </th>
                                        <th>
                                            <div class="layui-table-cell"><span>操作</span>
                                            </div>
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-show="list.length==0">
                                        <td class="nodata" colspan="12">{{nomoredata}}</td>
                                    </tr>
                                    <template v-for="(item, index) in list">
                                        <tr>
                                            <td class="layui-table-col-special">
                                                <div class="layui-table-cell" v-show="isSelected(item.node_id)">
                                                    <div lay-skin="primary"
                                                        class="layui-unselect layui-form-checkbox layui-form-checked"
                                                        onclick="select(this)" :index="index"
                                                        :primary_key="item.node_id" :pid="item.node_pid"><i
                                                            class="layui-icon layui-icon-ok"></i></div>
                                                </div>
                                                <div class="layui-table-cell" v-show="!isSelected(item.node_id)">
                                                    <div lay-skin="primary" class="layui-unselect layui-form-checkbox"
                                                        onclick="select(this)" :index="index"
                                                        :primary_key="item.node_id" :pid="item.node_pid"><i
                                                            class="layui-icon layui-icon-ok"></i></div>
                                                </div>
                                            </td>
                                            <td>
                                                <div class="layui-table-cell">{{item.node_id}}</div>
                                            </td>
                                            <td>
                                                <div class="layui-table-cell">
                                                    <font color=#ccc v-show="item.node_system==1">系统</font>
                                                    <font v-show="item.node_system==0">自定义</font>
                                            </td>
                                            <td>
                                                <div class="layui-table-cell"><i
                                                        :class="['iconfont icon-'+item.node_icon]"></i>{{item.node_title}}<i
                                                        :onclick="['layer.tips(document.getElementById(\'hidden_'+item.node_id+'\').innerHTML, this, {tips: 3});']"
                                                        style="color:#ccc;cursor:pointer;"
                                                        class="iconfont icon-info-circle" :title="item.node_desc"></i>
                                                    <div :id="['hidden_'+item.node_id]" class="hidden">
                                                        {{item.node_desc}}</div>
                                                </div>
                                            </td>
                                            <td>
                                                <div class="layui-table-cell">
                                                    {{item.node_module}}/{{item.node_controller}}/{{item.node_action}}
                                                </div>
                                            </td>
                                            <td>
                                                <div class="layui-table-cell">{{item.node_order}}</div>
                                            </td>
                                            <td>
                                                <div class="layui-table-cell">{{time2string(item.node_updatetime)}}
                                                </div>
                                            </td>
                                            <td class="layui-table-col-special">
                                                <div class="layui-table-cell">
                                                    <font color=#ccc v-show="item.node_status==1">
                                                        <a @click="item_enable" :itemid="item.node_id"
                                                            class="layui-btn layui-btn-danger layui-btn-xs iconfont icon-guanbi3"
                                                            title="启用"></a>
                                                    </font>
                                                    <font v-show="item.node_status==0">
                                                        <a @click="item_disable" :itemid="item.node_id"
                                                            class="layui-btn layui-btn-primary  layui-btn-xs iconfont icon-duihao"
                                                            title="禁用"></a>
                                                    </font>
                                                    <font color=#ccc v-show="item.node_show==1">
                                                        <a @click="item_hide" :itemid="item.node_id"
                                                            class="layui-btn layui-btn-primary layui-btn-xs iconfont icon-headlines"
                                                            title="隐藏"></a>
                                                    </font>
                                                    <font v-show="item.node_show==0">
                                                        <a @click="item_show" :itemid="item.node_id"
                                                            class="layui-btn layui-btn-danger layui-btn-xs iconfont icon-shielding"
                                                            title="显示"></a>
                                                    </font>
                                                    <a @click="item_edit" :itemid="item.node_id"
                                                        class="layui-btn layui-btn-primary  layui-btn-xs iconfont icon-edit"
                                                        title="编辑"></a>
                                                    <a @click="item_delete" :itemid="item.node_id"
                                                        class="layui-btn layui-btn-primary layui-btn-xs iconfont icon-empty"
                                                        title="删除"></a>
                                                </div>
                                            </td>
                                        </tr>
                                        <template v-for="(subItem,subIndex) in item.sub">
                                            <tr>
                                                <td class="layui-table-col-special">
                                                    <div class="layui-table-cell" v-show="isSelected(subItem.node_id)">
                                                        <div lay-skin="primary"
                                                            class="layui-unselect layui-form-checkbox layui-form-checked"
                                                            onclick="select(this)" :index="subIndex"
                                                            :primary_key="subItem.node_id" :pid="subItem.node_pid"><i
                                                                class="layui-icon layui-icon-ok"></i></div>
                                                    </div>
                                                    <div class="layui-table-cell" v-show="!isSelected(subItem.node_id)">
                                                        <div lay-skin="primary"
                                                            class="layui-unselect layui-form-checkbox"
                                                            onclick="select(this)" :index="subIndex"
                                                            :primary_key="subItem.node_id" :pid="subItem.node_pid"><i
                                                                class="layui-icon layui-icon-ok"></i></div>
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="layui-table-cell">{{subItem.node_id}}</div>
                                                </td>
                                                <td>
                                                    <div class="layui-table-cell">
                                                        <font color=#ccc v-show="subItem.node_system==1">系统</font>
                                                        <font v-show="subItem.node_system==0">自定义</font>
                                                </td>
                                                <td>
                                                    <div class="layui-table-cell"><i
                                                            class="iconfont icon-enter subItemIcon"></i> <i
                                                            :class="['iconfont icon-'+subItem.node_icon]"></i>{{subItem.node_title}}<i
                                                            :onclick="['layer.tips(document.getElementById(\'hidden_'+subItem.node_id+'\').innerHTML, this, {tips: 3});']"
                                                            style="color:#ccc;cursor:pointer;"
                                                            class="iconfont icon-info-circle"
                                                            :title="subItem.node_desc"></i>
                                                        <div :id="['hidden_'+subItem.node_id]" class="hidden">
                                                            {{subItem.node_desc}}</div>
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="layui-table-cell">
                                                        {{subItem.node_module}}/{{subItem.node_controller}}/{{subItem.node_action}}
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="layui-table-cell">{{subItem.node_order}}</div>
                                                </td>
                                                <td>
                                                    <div class="layui-table-cell">
                                                        {{time2string(subItem.node_updatetime)}}</div>
                                                </td>
                                                <td class="layui-table-col-special">
                                                    <div class="layui-table-cell">
                                                        <font color=#ccc v-show="subItem.node_status==1">
                                                            <a @click="item_enable" :itemid="subItem.node_id"
                                                                class="layui-btn layui-btn-danger layui-btn-xs iconfont icon-guanbi3"
                                                                title="启用"></a>
                                                        </font>
                                                        <font v-show="subItem.node_status==0">
                                                            <a @click="item_disable" :itemid="subItem.node_id"
                                                                class="layui-btn layui-btn-primary  layui-btn-xs iconfont icon-duihao"
                                                                title="禁用"></a>
                                                        </font>
                                                        <font color=#ccc v-show="subItem.node_show==1">
                                                            <a @click="item_hide" :itemid="subItem.node_id"
                                                                class="layui-btn layui-btn-primary layui-btn-xs iconfont icon-headlines"
                                                                title="隐藏"></a>
                                                        </font>
                                                        <font v-show="subItem.node_show==0">
                                                            <a @click="item_show" :itemid="subItem.node_id"
                                                                class="layui-btn layui-btn-danger layui-btn-xs iconfont icon-shielding"
                                                                title="显示"></a>
                                                        </font>
                                                        <a @click="item_edit" :itemid="subItem.node_id"
                                                            class="layui-btn layui-btn-primary  layui-btn-xs iconfont icon-edit"
                                                            title="编辑"></a>
                                                        <a @click="item_delete" :itemid="subItem.node_id"
                                                            class="layui-btn layui-btn-primary layui-btn-xs iconfont icon-empty"
                                                            title="删除"></a>
                                                    </div>
                                                </td>
                                            </tr>
                                        </template>
                                    </template>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="layui-table-page">
                        <div v-show="isSelectedAll" lay-skin="primary" style="padding:0"
                            class="layui-unselect layui-form-checkbox layui-form-checked" onclick="selectALL()"><i
                                class="layui-icon layui-icon-ok"></i></div>
                        <div v-show="!isSelectedAll" lay-skin="primary" style="padding:0"
                            class="layui-unselect layui-form-checkbox" onclick="selectALL()"><i
                                class="layui-icon layui-icon-ok"></i></div>
                        <a @click="item_show_all" class="layui-btn layui-btn-primary layui-btn-xs " title="显示到菜单"><i
                                class="iconfont icon-headlines"></i>显示</a>
                        <a @click="item_hide_all" class="layui-btn layui-btn-primary layui-btn-xs " title="从菜单隐藏"><i
                                class="iconfont icon-shielding"></i>隐藏</a>
                        <a @click="item_enable_all" class="layui-btn layui-btn-primary layui-btn-xs " title="启用选中项"><i
                                class="iconfont icon-duihao"></i>启用</a>
                        <a @click="item_disable_all" class="layui-btn layui-btn-primary layui-btn-xs " title="禁用选中项"><i
                                class="iconfont icon-guanbi3"></i>禁用</a>
                        <a @click="item_delete_all" class="layui-btn layui-btn-primary layui-btn-xs " title="删除选中项"><i
                                class="iconfont icon-empty"></i>删除</a>
                        <div class="layui-input-inline layui-layout-right" style="padding:5px 10px;">
                            <button @click="item_import" type="button" class="layui-btn layui-btn-sm"><i
                                    class="iconfont icon-smallscreen"></i>导入全部节点</button></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
{include file="public/foot"/}
<script>
    var app = new Vue({
        el: ".root_box",
        data: {
            list: [],
            nomoredata: "数据加载中",
            selectList: [],
            isSelectedAll: false,
            node_module: "__all__",
            node_controller: '',
            node_action: "",
            node_show: 1,
            //上面的参数不允许删除
        },
        created: function () {
            this.getList();
        },
        methods: {
            node_show_change: function () {
                this.getList();
            },
            isSelected: function (node_id) {
                return this.selectList.indexOf(node_id) >= 0 ? true : false;
            },
            time2string: function (timestamps) {
                return new Date(parseInt(timestamps) * 1000).Format("MM-dd hh:mm");
            },
            getList: function () {
                this.isSelectedAll = false;
                this.selectList = [];
                _loading();
                $.post("/api/node/lists", Object.assign({
                    node_module: this.node_module,
                    node_controller: this.node_controller,
                    node_action: this.node_action,
                    node_show: this.node_show,
                }, PostCommon),
                    function (data, status) {
                        _hideLoading();
                        if (data.code != 200) {
                            if (data.url) {
                                location.replace(data.url);
                            }
                            _alert(data.msg);
                            app.nomoredata = data.msg;
                        } else {
                            if (data.data.data.length == 0) {
                                app.nomoredata = "没有更多数据了";
                            }
                            app.list = data.data.data;
                        }
                    });
            },
            item_edit: function (e) {
                var item_id = e.target.attributes.itemid.value;
                openFrame("/admin/node/update?node_id=" + item_id, '修改节点', 650, 600);
            },
            item_add: function (e) {
                openFrame("/admin/node/add", '添加节点', 650, 600);
            },
            item_import: function (e) {
                var that = this;
                _confirm('是否开始导入节点?', '节点导入', function () {
                    _loading("正在导入");
                    $.post("/api/node/import", PostCommon,
                        function (data, status) {
                            _hideLoading();
                            if (data.code != 200) {
                                if (data.url) {
                                    location.replace(data.url);
                                }
                                _alert(data.msg, "导入失败");
                            } else {
                                _alert(data.msg, '导入成功', function () {
                                    that.getList();
                                });
                            }
                        });
                });
            },
            item_enable: function (e) {
                var item_id = e.target.attributes.itemid.value;
                var that = this;
                _confirm('是否确认启用这个节点?', '启用提醒', function () {
                    _loading("正在启用");
                    $.post("/api/node/enable", Object.assign({
                        node_id: item_id,
                    }, PostCommon),
                        function (data, status) {
                            _hideLoading();
                            if (data.code != 200) {
                                if (data.url) {
                                    location.replace(data.url);
                                }
                                _alert(data.msg);
                            } else {
                                that.getList();
                            }
                        });
                });
            },
            item_disable: function (e) {
                var item_id = e.target.attributes.itemid.value;
                var that = this;
                _confirm('是否确认禁用这个节点?', '禁用提醒', function () {
                    _loading("正在禁用");
                    $.post("/api/node/disable", Object.assign({
                        node_id: item_id,
                    }, PostCommon),
                        function (data, status) {
                            _hideLoading();
                            if (data.code != 200) {
                                if (data.url) {
                                    location.replace(data.url);
                                }
                                _alert(data.msg);
                            } else {
                                that.getList();
                            }
                        });
                });
            },
            item_show: function (e) {
                var item_id = e.target.attributes.itemid.value;
                var that = this;
                _confirm('是否确认显示这个节点?', '显示提醒', function () {
                    _loading("正在显示");
                    $.post("/api/node/show_menu", Object.assign({
                        node_id: item_id,
                    }, PostCommon),
                        function (data, status) {
                            _hideLoading();
                            if (data.code != 200) {
                                if (data.url) {
                                    location.replace(data.url);
                                }
                                _alert(data.msg);
                            } else {
                                that.getList();
                            }
                        });
                });
            },
            item_hide: function (e) {
                var item_id = e.target.attributes.itemid.value;
                var that = this;
                _confirm('是否确认隐藏这个节点?', '隐藏提醒', function () {
                    _loading("正在隐藏");
                    $.post("/api/node/hide_menu", Object.assign({
                        node_id: item_id,
                    }, PostCommon),
                        function (data, status) {
                            _hideLoading();
                            if (data.code != 200) {
                                if (data.url) {
                                    location.replace(data.url);
                                }
                                _alert(data.msg);
                            } else {
                                that.getList();
                            }
                        });
                });
            },
            item_delete: function (e) {
                var item_id = e.target.attributes.itemid.value;
                var that = this;
                _confirm('是否确认删除这个节点?', '删除提醒', function () {
                    _loading("正在删除");
                    $.post("/api/node/delete", Object.assign({
                        node_id: item_id,
                    }, PostCommon),
                        function (data, status) {
                            _hideLoading();
                            if (data.code != 200) {
                                if (data.url) {
                                    location.replace(data.url);
                                }
                                _alert(data.msg);
                            } else {
                                that.getList();
                            }
                        });
                });
            },
            item_delete_all: function () {
                var that = this;
                _confirm('是否确认批量删除选择的节点?', '批量删除提醒', function () {
                    _loading("正在批量删除");
                    $.post("/api/node/delete", Object.assign({
                        node_id: app.selectList.join(","),
                    }, PostCommon),
                        function (data, status) {
                            _hideLoading();
                            if (data.code != 200) {
                                if (data.url) {
                                    location.replace(data.url);
                                }
                                _alert(data.msg);
                            } else {
                                that.getList();
                            }
                        });
                });
            },
            item_enable_all: function () {
                var that = this;
                _confirm('是否确认批量启用选择的节点?', '批量启用提醒', function () {
                    _loading("正在批量启用");
                    $.post("/api/node/enable", Object.assign({
                        node_id: app.selectList.join(","),
                    }, PostCommon),
                        function (data, status) {
                            _hideLoading();
                            if (data.code != 200) {
                                if (data.url) {
                                    location.replace(data.url);
                                }
                                _alert(data.msg);
                            } else {
                                that.getList();
                            }
                        });
                });
            },
            item_disable_all: function () {
                var that = this;
                _confirm('是否确认批量禁用选择的节点?', '批量禁用提醒', function () {
                    _loading("正在批量禁用");
                    $.post("/api/node/disable", Object.assign({
                        node_id: app.selectList.join(","),
                    }, PostCommon),
                        function (data, status) {
                            _hideLoading();
                            if (data.code != 200) {
                                if (data.url) {
                                    location.replace(data.url);
                                }
                                _alert(data.msg);
                            } else {
                                that.getList();
                            }
                        });
                });
            },
            item_show_all: function () {
                var that = this;
                _confirm('是否确认批量显示选择的节点?', '批量显示提醒', function () {
                    _loading("正在批量显示");
                    $.post("/api/node/show_menu", Object.assign({
                        node_id: app.selectList.join(","),
                    }, PostCommon),
                        function (data, status) {
                            _hideLoading();
                            if (data.code != 200) {
                                if (data.url) {
                                    location.replace(data.url);
                                }
                                _alert(data.msg);
                            } else {
                                that.getList();
                            }
                        });
                });
            },
            item_hide_all: function () {
                var that = this;
                _confirm('是否确认批量隐藏选择的节点?', '批量隐藏提醒', function () {
                    _loading("正在批量隐藏");
                    $.post("/api/node/hide_menu", Object.assign({
                        node_id: app.selectList.join(","),
                    }, PostCommon),
                        function (data, status) {
                            _hideLoading();
                            if (data.code != 200) {
                                if (data.url) {
                                    location.replace(data.url);
                                }
                                _alert(data.msg);
                            } else {
                                that.getList();
                            }
                        });
                });
            },
        }
    });

    function select(primary_key) {
        var index = parseInt($(primary_key).attr('index'));
        var pid = parseInt($(primary_key).attr('pid'));
        var primary_key = parseInt($(primary_key).attr('primary_key'));
        console.log(index);
        console.log(primary_key);
        if (app.selectList.indexOf(primary_key) >= 0) {
            app.selectList.splice(app.selectList.indexOf(primary_key), 1);
            if (pid == 0) {
                app.list[index].sub.forEach(function (subValue, subIndex) {
                    if (app.selectList.indexOf(subValue.node_id) >= 0) {
                        app.selectList.splice(app.selectList.indexOf(subValue.node_id), 1);
                    }
                });
            }
        } else {
            app.selectList.push(primary_key);
            if (pid == 0) {
                app.list[index].sub.forEach(function (subValue, subIndex) {
                    if (app.selectList.indexOf(subValue.node_id) < 0) {
                        app.selectList.push(subValue.node_id);
                    }
                });
            }
        }
        console.log(JSON.parse(JSON.stringify(app.selectList)));
    }

    function selectALL() {
        app.selectList = [];
        if (!app.isSelectedAll) {
            app.list.forEach(function (value, index) {
                app.selectList.push(value.node_id);
                app.list[index].sub.forEach(function (subValue, subIndex) {
                    app.selectList.push(subValue.node_id);
                });
            });
        }
        app.isSelectedAll = !app.isSelectedAll;
    }
</script>

</html>